<template>
	<div class="layui-form-item" style="position: relative;">
		<label class="layui-form-label" v-if="title">{{title}}</label>
		<div class="layui-input-block" :style="{'margin-left':title?'110px' :'0'}">
			<a href="javascript:;" @tap="show = !show" class="layui-input">
				{{myValue}}
			</a>
			<a href="javascript:;" v-if="showIcon" @tap="show = !show" class="layui-icon layui-icon-date"></a>
			<view class="datepicker">
				<mxDatePicker :cancelText="this.myValue?'清除':'取消'" :value="defaultValue" :format="format" :type="type" :color="color" :show="show" :showSeconds="showSeconds" :showHoliday="showHoliday" :showTips="showTips" :beginText="beginText" :endText="endText" @confirm="confirm" @cancel="cancel"></mxDatePicker>
			</view>
		</div>
		
		<input type="text" :name="name" :value="finalStartValue" style="display: none;">
		<input type="text" :name="endName" :value="finalEndValue" style="display: none;" v-if="finalEndValue">
		
	</div>
</template>

<script>
	import mxDatePicker from "./mx-datepicker.vue" ;
	export default {
		name : "datepicker" ,
		components:{
			mxDatePicker
		},
		props:{
			title : {
				type : String ,
				default : "时间"
			},
			name : {
				type : String ,
				default : "startTime"
			},
			value : {
				type : String ,
				default : ""
			},
			endName : {
				type : String ,
				default : "endTime"
			},
			endValue : {
				type : String ,
				default : ""
			},
			//颜色
			color: {
				type: String,
				default: '#5d83f7'
			},
			//是否显示秒 针对type为datetime或time时生效
			showSeconds: {
				type: Boolean,
				default: false
			},
			//类型date time datetime range rangetime
			type: {
				type: String,
				default: 'date'
			},
			//显示公历节日
			showHoliday: {
				type: Boolean,
				default: true
			},
			//显示提示
			showTips: {
				type: Boolean,
				default: false
			},
			//开始文案 针对type为范围选择时生效
			beginText: {
				type: String,
				default: '开始'
			},
			//结束文案 针对type为范围选择时生效
			endText: {
				type: String,
				default: '结束'
			},
			showIcon:{
				type : Boolean,
				default : true
			}
		},
		created:function(e){
			this.setDefaultValue();
		},
		watch:{
			value:function(e){
				this.setDefaultValue();
			},
			endValue:function(e){
				this.setDefaultValue();
			},
			type : function(e){
				this.setDefaultValue();
			}
		},
		data() {
			return {
				show : false ,
				myValue : "" ,
				finalStartValue : "" ,
				finalEndValue : "" ,
				format : "yyyy-mm-dd" ,
				defaultValue : "" 
			};
		},
		methods:{
			confirm:function(e){
				var value = e.value ;
				if (typeof value == "string") {
					this.finalStartValue = value;
					this.myValue = e.value ;
				}else{
					this.finalStartValue = value[0] + " 00:00:00";
					this.finalEndValue = value[1] + " 23:59:59";
					this.myValue = value.join(' ~ ') ;
				}
				this.show = false ;
				this.$emit("confirm",e);
			},
			cancel:function(e){
				this.show = false ;
				this.myValue = '' ;
				this.finalStartValue = '' ;
				this.finalEndValue = '' ;
				this.$emit("cancel",e);
			},
			setDefaultValue : function(e){
				//类型date time datetime range rangetime
				if (this.type == "date" || this.type == "range") {
					this.format = "yyyy-mm-dd" ;
				}else if (this.type == "time") {
					this.format = "hh:ii:ss" ;
				}else if (this.type == "rangetime" || this.type == "datetime") {
					this.format =  "yyyy-mm-dd hh:ii:ss" ;
				}
				this.finalStartValue = this.value ;
				this.finalEndValue = this.endValue ;
				if (!this.endValue) {
					var value = this.resetValueToDate(this.value) ;
					this.defaultValue = value ; //
					this.myValue = value ; //对外
				}else{
					var startDate = this.resetValueToDate(this.value);
					var endDate = this.resetValueToDate(this.endValue);
					this.defaultValue = [ startDate, endDate];
					this.myValue = this.defaultValue.join(' ~ ');
				}
				console.log("====",this.defaultValue)
			},
			
			resetValueToDate : function(value){
				if (!!this.value && this.value.length == 19) {
					value = value.substr(0,10);
				}
				return value ;
			},
		}
	}
</script>

<style scoped lang="scss">
.datepicker{
	position: absolute;
	left: 0;
	top: 40px;
}
.layui-input{
	line-height: 38px;
}
.layui-input-block{
	position: relative;
}
.layui-icon-date{
	position: absolute;
	right: 7px;
	top: 7px;
	font-size: 27px;
}
</style>
